<template>
    <div class="nav" v-if="navShow">
        <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000" :route="true">
            <van-tabbar-item v-for="(item, index) in nav" :to="item.to" :key="index"
                :icon="active == index ? item.y : item.n">
                {{ item.name }}
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
export default {
    data() {
        return {
            navShow: true,
            active: 0,
            nav: [
                { name: '首页', y: 'wap-home', n: 'wap-home-o', to: '/home' },
                { name: '专题', y: 'coupon', n: 'coupon-o', to: '/topic' },
                { name: '分类', y: 'more', n: 'more-o', to: '/classify' },
                { name: '购物车', y: 'cart', n: 'cart-o', to: '/cart' },
                { name: '我的', y: 'manager', n: 'manager-o', to: '/user' },
            ]
        }
    },
    watch: {
        $route: {
            handler(val) {
                this.active = this.nav.findIndex(item => item.to == val.path)
                this.navShow = this.$route.name != 'product'
            },
            immediate: true
        }
    },
}
</script>

<style>

</style>